<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <% include _head.html %>
    <title>创建新订单</title>
</head>
<body>

<% include _nav.html %>
<div class="container-fluid">
    <div class="row">
        <% include _menu.html %>
        <div class=" col-md-11 col-md-offset-1 main">

            <div class="container-fluid">
                <form class="form-horizontal" style="margin-top:20px; " >

                    <div style="width: 1000px;box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);border-radius: 5px;background: rgba(255, 255, 255, 0.65);margin: 0 auto;height: 160px;float: none;padding: 10px 0 10px;">
                        <div class="form-group">
                            <label style="font-size: 22px;padding-left: 50px;">寄件人</label>
                        </div>
                            <div class="form-group">
                                <label for="consignor" class="required col-xs-2 control-label">姓名:</label>
                                <div class="col-xs-10 input-group">
                                     <input type="text" class="form-control" id="consignor" placeholder="寄件人姓名" autocomplete="off" required autofocus style="width:150px;">
                                    <label for="consignorPhoneNumber" class="required col-xs-4 control-label">联系方式:</label>
                                    <input type="number" class="form-control" id="consignorPhoneNumber" placeholder="寄件人联系方式" autocomplete="off" required autofocus style="width:150px;">
                                </div>
                            </div>
                        <div class="form-group">
                            <label for="consignorAddress" class="col-sm-2 control-label">地址:</label>
                            <div class="col-sm-10 input-group">
                                <input type="text" class="form-control" id="consignorAddress" placeholder="寄件人地址" autocomplete="off" required autofocus style="width:300px;">
                            </div>
                        </div>
                    </div>

                    <div class="form-group" style="padding-top: 5px">
                        <div style="width: 1000px;box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);border-radius: 5px;background: rgba(255, 255, 255, 0.65);margin: 0 auto;height: 160px;float: none;padding: 10px 0 0px;">
                            <div class="form-group">
                                <label style="font-size: 22px;padding-left: 50px;">收件人</label>
                            </div>
                            <div class="form-group">
                                <label for="consignee" class="col-sm-2 control-label">姓名:</label>
                                <div class="col-sm-10 input-group">
                                    <input type="text" class="form-control"  id="consignee" placeholder="收件人姓名" autocomplete="off" required autofocus style="width:150px;">
                                    <label for="consigneePhoneNumber" class="col-sm-4 control-label">联系方式:</label>
                                    <input type="number" class="form-control" id="consigneePhoneNumber" placeholder="收件人联系方式" autocomplete="off" required autofocus style="width:150px;">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="consigneeAddress" class="col-sm-2    control-label">地址:</label>
                                <div class="col-sm-10 input-group">
                                    <input type="text" class="form-control" id="consigneeAddress" placeholder="收件人地址" autocomplete="off" required autofocus style="width:300px;">
                                </div>
                            </div>
                         </div>
                    </div>

                    <div class="form-group" style="padding-top: 5px">
                        <div style="width: 1000px;box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);border-radius: 5px;background: rgba(255, 255, 255, 0.65);margin: 0 auto;height: 220px;float: none;padding: 10px 0 10px;">
                            <div class="form-group">
                                <label style="font-size: 22px;padding-left: 50px;">货物信息</label>
                            </div>

                            <div class="form-group">
                                <label for="weight" class="col-sm-2  control-label">总重量(kg):</label>
                                <div class="col-sm-8 input-group">
                                    <input type="number" class="form-control" id="weight" placeholder="重量" autocomplete="off" required autofocus style="width:100px;" ng-model="weight">
                                    <label for="volume" class="col-sm-3 control-label">总体积(m³):</label>
                                    <input type="number" class="form-control" id="volume" placeholder="体积:" autocomplete="off" required autofocus style="width:100px;" ng-model="volume">
                                    <label for="count" class="col-sm-3 control-label">总数量(件):</label>
                                    <input type="number" class="form-control" id="count" placeholder="数量" autocomplete="off" required autofocus style="width:100px;" ng-model="count">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="startAddress" class="col-sm-2 control-label">出发站点选择:</label>
                                <div class="col-sm-8 input-group">
                                    <select id="startAddress" class="form-control" style="width:200px;">
                                    </select>
                                    <label for="endAddress" class="col-sm-4 control-label">到达站点选择:</label>
                                    <select id="endAddress" class="form-control" style="width:200px;">
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">

                                <div class="col-sm-8 input-group">

                                </div>
                            </div>
                            <div class="form-group">
                                <h4  class="col-sm-offset-5 col-sm-10">总计价格: <span id="priceLabel" style="color: indianred"></span></h4>
                            </div>
                        </div>
                    </div>
                    <div class="form-group submit-btns">
                        <div class="col-sm-offset-5 col-sm-10 input-group">
                            <button type="submit" class="submit btn btn-primary" style="width: 200px">确定</button>
                        </div>
                    </div>
                </form>

            </div> <!-- /container -->
        </div>
    </div>
</div>

<!--下单成功的弹出框-->
<div class="modal fade" id="mymodal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">成功</h4>
            </div>
            <div class="modal-body">
                <div class="alert alert-success" role="alert">恭喜您下单成功！稍后将为您跳转到订单页面 </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</body>
</html>

<% include _foot.html %>
<script>
    var tab = '/createOrder';
    var weightPrice;
    var volumePrice;
    var minPrice;
    var addressArray;
    var distances = 0;


    $(function(){
        $('.submit').on('click', function(e){
            var consignor = $('#consignor').val();
            var consignee = $('#consignee').val();
            var consignorPhoneNumber = $('#consignorPhoneNumber').val();
            var consigneePhoneNumber = $('#consigneePhoneNumber').val();
            var consignorAddress = $('#consignorAddress').val();
            var consigneeAddress = $('#consigneeAddress').val();
            var weight = $('#weight').val();
            var volume = $('#volume').val();
            var count = $('#count').val();
            var startAddressID = addressArray[parseInt($('#startAddress').val())].id;
            var endAddressID = addressArray[parseInt($('#endAddress').val())].id;
            if(!consignor||!consignee||!consignorPhoneNumber||!consigneePhoneNumber||!consignorAddress||!consigneeAddress||!weight||!volume||!count){
                alert('请正确填写订单信息');
                return false;
            }
            if(startAddressID == endAddressID){
                alert('出发站定与到达站点不能相同!');
                return false;
            }
            $('.submit').attr('disabled', 'disabled');
            $.post('/order/createOrder',{consignor:consignor,consignee:consignee,
                consignorPhoneNumber:consignorPhoneNumber,consignorAddress:consignorAddress,consigneePhoneNumber:consigneePhoneNumber,
                consigneeAddress:consigneeAddress,weight:weight,volume:volume,count:count,startAddressID:startAddressID,endAddressID:endAddressID
            },function (res) {
                if(res.code < 0 ){
                    return alert(res.msg);
                }
                $("#mymodal").modal("toggle");
               // 延迟4秒跳转到登录界面
                setTimeout(function () {
                    location.href = '/orderlist';
                }, 2000);
                return false;
            });
            return false;
        });
    });

    $.post('/order/queryAddress', function(res){
        if(res.code < 0){
            return alert(res.msg);
        }
        addressArray = res.data.data;
        for (var i = 0; i<addressArray.length;i++){
            $('#startAddress').append('<option value="'+i+'">'+addressArray[i].province+"-"+addressArray[i].city+"-"+addressArray[i].conunty+'</option>');
            $('#endAddress').append('<option value="'+i+'">'+addressArray[i].province+"-"+addressArray[i].city+"-"+addressArray[i].conunty+'</option>');
        }
        volumePrice = parseFloat(res.data.priceData[0].cubePrice)/100;
        weightPrice = parseFloat(res.data.priceData[0].weightPrice)/100;
        minPrice = parseFloat(res.data.priceData[0].minPrice);
    })

    //监听与价格相关的节点
    $('#weight').bind('input propertychange', function() {
        refreshPrice();
    });

    $('#volume').bind('input propertychange', function() {
        refreshPrice();
    });

    $("#startAddress").on('change',function (e) {
        getDistances();
    });

    $("#endAddress").on('change',function (e) {
        getDistances();
    });
    //根据坐标计算距离
    function getDistances() {
        var startAddress = addressArray[parseInt($('#startAddress').val())];
        var endAddress = addressArray[parseInt($('#endAddress').val())]
        var longitudoDi = Math.pow((startAddress.longitudo-endAddress.longitudo)*85.39,2);
        var latitudeDi = Math.pow((startAddress.latitude-endAddress.latitude)*111,2);
        distances = Math.sqrt(longitudoDi+latitudeDi);
        refreshPrice();
    }

    //刷新价格
    var refreshPrice = function () {
        var weight = $('#weight').val()?parseFloat($('#weight').val()):0;
        var volume = $('#volume').val()?parseFloat($('#volume').val()):0;
        //取价格的最大值
        var totalPrice = weight*weightPrice*distances>minPrice?weight*weightPrice*distances:minPrice;
        totalPrice = totalPrice>volume*volumePrice*distances?totalPrice:volume*volumePrice*distances;
        totalPrice = totalPrice.toFixed(2);

        $('#priceLabel').html(totalPrice+"元");
    }
</script>

